<template>
  <div class="container container-1200">
    <div class="imgFrame">
      <img :src="headImg" alt="要闻图" @click="toLink(imageLink)" class="noticeImg"  />
    </div>
    <div class="publicPanel flex justify-between align-start">
      <div class="leftPanel peopleLeft flex justify-between flex-wrap">
        <div class="leftTitle flex align-center"><i class="iconfont">&#xe8aa;</i>查询中心</div>
        <div class="leftItem"
             v-for="(item,index) in peopleIcon"
             :key="index"
             :class="{'isChose': publicItemId == index}"
             @click="chosePublicIcon(index)">
          <div class="imgBox" @click="toLink(item.link)"><img :src="publicItemId == index ? chosedIcon[publicItemId].url : item.url" height="34px"></div>
          <i>{{item.title}}</i>
        </div>
      </div>
      <div class="rightPanel bannerList">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="item in 1" :key="item" label="用户管理" :name="'name'+item">
              <span slot="label" class="tabtitle flex align-center">
                <i class="iconfont">&#xe777;</i>
                <span class="span-box">
                  <span>下载中心</span>
                </span>
              </span>
            <div class="listPanel flex justify-between">
              <ul>
                <li v-for="(item,index) in downList.slice(0,6)" :key="index"><div class="title" @click="toLink(item.jump_url)">{{ item.title }}</div><i class="time">{{ item.timeY }}</i></li>
              </ul>
              <ul>
                <li v-for="(item,index) in downList.slice(7)" :key="index"><div class="title" @click="toLink(item.jump_url)">{{ item.title }}</div><i class="time">{{ item.timeY }}</i></li>
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="topic">
      <div class="container-1200 flex align-center">
        <swiper class="swiper" ref="swiper" :options="swiperOption">
          <swiper-slide class="swiperItem" v-for="(item,index) in swiperList" :key="index"><img :src="item.image_url" @click="toLink(item.topic.url)" alt="" width="170" height="60"></swiper-slide>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </div>



    <div class="leftTitle2 flex align-center"><i class="iconfont">&#xe856;</i>信息报送排名</div>
    <div class="bottomContainer">
      <el-tabs v-model="activeTitle" @tab-click="handleClick2" style="margin-bottom: 50px;">
        <el-tab-pane v-for="(item,index) in titleList" :key="index" :name="'name' + index">
          <span slot="label" class="paneTitle">
            <i class="iconfont" v-if="activeTitle == 'name'+index">&#xe90c;</i>
             <span class="span-box">
               <span>{{ item.title }}</span>
             </span>
          </span>
<!--          v-if="activeTitle == 'name0'"-->
          <div class="flex justify-between paneTable" v-if="activeTitle == 'name0'">
            <el-table :data="cityTable.slice(0,5)" stripe style="width: 90%; margin-right: 20px;">
              <el-table-column prop="id" label="排名" width="180"></el-table-column>
              <el-table-column prop="unit" label="报送单位" width="180"></el-table-column>
              <el-table-column prop="number" label="采纳数量"></el-table-column>
            </el-table>
            <el-table :data="cityTable.slice(6)" stripe style="width: 90%;">
              <el-table-column prop="id" label="排名" width="180"></el-table-column>
              <el-table-column prop="unit" label="报送单位" width="180"></el-table-column>
              <el-table-column prop="number" label="采纳数量"></el-table-column>
            </el-table>
          </div>
          <div class="flex justify-between paneTable" v-if="activeTitle == 'name1'">
            <el-table :data="collegesTable.slice(0,5)" stripe style="width: 90%; margin-right: 20px" >
              <el-table-column prop="id" label="排名" width="180"></el-table-column>
              <el-table-column prop="unit" label="报送单位" width="180"></el-table-column>
              <el-table-column prop="number" label="采纳数量"></el-table-column>
            </el-table>
            <el-table :data="collegesTable.slice(6)" stripe style="width: 90%;">
              <el-table-column prop="id" label="排名" width="180"></el-table-column>
              <el-table-column prop="unit" label="报送单位" width="180"></el-table-column>
              <el-table-column prop="number" label="采纳数量"></el-table-column>
            </el-table>
          </div>
          <div class="flex justify-between paneTable" v-if="activeTitle == 'name2'">
            <el-table :data="mechanismTable.slice(0,5)" stripe style="width: 90%; margin-right: 20px" >
              <el-table-column prop="id" label="排名" width="180"></el-table-column>
              <el-table-column prop="unit" label="报送单位" width="180"></el-table-column>
              <el-table-column prop="number" label="采纳数量"></el-table-column>
            </el-table>
            <el-table :data="mechanismTable.slice(6)" stripe style="width: 90%;">
              <el-table-column prop="id" label="排名" width="180"></el-table-column>
              <el-table-column prop="unit" label="报送单位" width="180"></el-table-column>
              <el-table-column prop="number" label="采纳数量"></el-table-column>
            </el-table>
          </div>
          <div class="flex justify-between paneTable" v-if="activeTitle == 'name3'">
            <el-table :data="officeTable.slice(0,5)" stripe style="width: 90%; margin-right: 20px" >
              <el-table-column prop="id" label="排名" width="180"></el-table-column>
              <el-table-column prop="unit" label="报送单位" width="180"></el-table-column>
              <el-table-column prop="number" label="采纳数量"></el-table-column>
            </el-table>
            <el-table :data="officeTable.slice(6)" stripe style="width: 90%;">
              <el-table-column prop="id" label="排名" width="180"></el-table-column>
              <el-table-column prop="unit" label="报送单位" width="180"></el-table-column>
              <el-table-column prop="number" label="采纳数量"></el-table-column>
            </el-table>
          </div>

        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  name: "index",
  data() {
    return {
      data: "",
      headImg:'',
      activeTitle: 'name0',
      activeName: 'name1',
      publicItemId: 0,
      downList:'',
      swiperList:'',
      imageLink:'',
      peopleIcon: [
        { url:require('../assets/image/index/slzc.png'), title: '招生考试'},
        { url:require('../assets/image/index/slzn.png'), title: '电话查询'},
        { url:require('../assets/image/index/slzd.png'), title: '成绩查询',link:'https://www.lzk.hl.cn/cxzx/'},
        { url:require('../assets/image/index/slpt.png'), title: '学历查询',link:'https://www.chsi.com.cn/xlcx/'},
      ],
      chosedIcon: [
        { url:require('../assets/image/index/zc.png'), title: '政策'},
        { url:require('../assets/image/index/zn.png'), title: '信息公开指南'},
        { url:require('../assets/image/index/zd.png'), title: '信息公开制度'},
        { url:require('../assets/image/index/pt.png'), title: '法定主动公开内容'},
        { url:require('../assets/image/index/nb.png'), title: '信息公开年报'},
        { url:require('../assets/image/index/yf.png'), title: '已申请公开'},
      ],
      titleList:[
        {title: '市地'},
        {title: '高校'},
        {title: '机关处室'},
        {title: '直属单位'},
      ],
      tableList:'',
      cityTable:[],
      collegesTable:'',
      mechanismTable:'',
      officeTable:'',
      swiperOption: {
        slidesPerView: 6,
        spaceBetween: 30,
        direction: 'horizontal',
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
          resize: () => {
            this.$refs.swiper.$swiper.changeDirection(
                window.innerWidth <= 960
                    ? 'vertical'
                    : 'horizontal'
            )
          }
        }
      },
    };
  },
  mounted() {
    this.getHeadImg()
    this.getSwiperList()
    this.getDownList()
    this.getRankList()
    this.getRankLink()
  },
  computed: {},
  methods: {
    async getHeadImg() {
      const res = await this.$http.get("/api/web/index");
      if (res.code == 200) {
        this.headImg = res.data.image_url;
        this.imageLink = res.data.url
      }
    },
    async getSwiperList() {
      const res = await this.$http.get("/api/web/column");
      if (res.code == 200) {
        this.swiperList = res.data;
        console.log(this.swiperList)
      }
    },
    async getDownList() {
      const res = await this.$http.get("/api/web/down");
      if (res.code == 200) {
        this.downList = res.data;
      }
    },
    async getRankList() {
      const res = await this.$http.get("/api/web/rank");
      if (res.code == 200) {
        this.tableList = res.data
        this.cityTable = res.data.city
        this.collegesTable = res.data.colleges
        this.mechanismTable = res.data.mechanism
        this.officeTable = res.data.office
      }
    },
    async getRankLink() {
      const res = await this.$http.get("/api/web/link");
      if (res.code == 200) {
        console.log(res)
      }
    },
    handleClick(tab) {
      this.activeName = tab.name
    },
    handleClick2(tab) {
      this.activeTitle = tab.name
    },
    chosePublicIcon(id){
      this.publicItemId = id;
    },
    toLink(url){
      window.open(url)
    }
  },
  watch: {},
  components: {
    swiper,
    swiperSlide
  },
};
</script>
<style>
.el-tabs__item{
  /*padding: 0 40px;*/
}

.bottomContainer .el-tabs__nav-scroll{
  padding-left: 150px;
}
.bottomContainer .el-tabs__item{
  padding: 0 40px;
}
.el-table td, .el-table th{
  text-align: center;
}
.el-table th{
  background: #2c64ff;
  color: #ffffff;
}
.el-table__row:hover{
  color: blue;
}
@media screen and (max-width: 600px) {
  .bottomContainer .el-tabs__nav-scroll{
    padding-left: 20px;
  }
}
</style>
<style lang="scss" scoped>
.container {
  .imgFrame {
    //width: 1200px;
    height: 320px;
    margin-bottom: 50px;
    margin-top: 20px;
    .noticeImg {
      width: 100%;
      height: 100%;
    }
  }
  .publicPanel{
    width: 100%;
    margin-top: 38px;
    .secLeft{
      width: 676px;
      height: 322px;
      border-radius: 10px;
      overflow: hidden;
    }
    .leftPanel{
      width: 100%;
      .leftTitle{
        text-align: left;
        width: 100%;
        line-height: 60px;
        color: #2c64ff;
        font-weight: bold;
        .iconfont{
          font-size: 24px;
          font-weight: normal;
        }
      }
      .leftItem{
        width: 90px;
        //height: 110px;
        border-radius: 6px;
        cursor: pointer;
        margin-bottom: 30px;
        padding: 20px 4px;
        .imgBox{
          width: 100%;
          margin-bottom: 18px;
        }
        i{
          font-size: 18px;
          line-height: 20px;
          color: #2c64ff;
          font-weight: normal;
        }
        &.isChose{
          background: #2c64ff;
          i{
            color: #ffffff;
          }
        }
      }
    }
    .peopleLeft{
      width: 240px;
    }
    .secIcons{
      width: 500px;
      .leftItem{
        width: 100px;
        margin-right: 20px;
        i{
          font-size: 14px;
        }
      }
    }
    .rightPanel{
      flex: 1;
      height: 337px;
      background-color: #ffffff;
      overflow: hidden;
      margin-left: 30px;
      .tabtitle{
        .iconfont{
          font-size: 22px;
        }
      }
      .listPanel{
        width: 100%;
        padding-left: 20px;
        ul{
          width: 45%;
          li {
            width: 100%;
            //overflow: hidden;
            //text-overflow:ellipsis;
            //white-space: nowrap;
            list-style: disc;
            line-height: 36px;
            font-size: 18px;
            font-weight: 500;
            color: #333333;
            cursor: pointer;
            position: relative;
            &:hover{
              color: #2c64ff;
            }
            .title{
              width: 80%;
              float: left;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: left;
            }
            .time{
              position: absolute;
              right: 10px;
              font-size: 14px;
              line-height: 36px;
              float: left;
            }
          }
        }
      }
    }
  }
  .topic{
    height: 150px;
    .swiper{
      width: 100%;
      overflow: hidden;
      .swiperItem{
        width: 180px;
        height: 60px;
      }
    }
  }
  .leftTitle2{
    position: absolute;
    text-align: left;
    width: 100%;
    line-height: 60px;
    color: #2c64ff;
    font-weight: bold;
    .iconfont{
      font-size: 24px;
      font-weight: normal;
    }
  }
  //.queryCenter{
  //    height: 354px;
  //    .leftPanel{
  //        width: 284px;
  //        .titleLabel{
  //
  //        }
  //    }
  //    .rightPanel{
  //        width: 916px;
  //    }
  //}
  @media screen and (max-width: 600px) {
    .imgFrame{
      width: 100%;
      height: 100%;
    }
    .publicPanel{
      flex-direction: column;
      .peopleLeft{
        width: 100%;
      }
    }
    .listPanel{
      flex-direction: column;
    }
    .paneTable{
      flex-direction: column;
    }
    .leftTitle2{
      position: relative;
    }
    .rightPanel{
      width: 100%;
      margin-top: 15px;
      flex: unset !important;
      //margin-right: 100px;
      li{
        font-size: 14px !important;
      }
    }
  }
}
</style>
